<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部组件4</title>
    <!-- 1.导包
                 2.路由路径
                 3.路由显示
                 4.组件
                 5.路由对象
                 6.挂载路由对象-->
</head>
<body>
<div id="app">
    <man-com></man-com>
    <router-link to="/human">human</router-link>
    <router-link to="/dog">狗子</router-link>
    <router-view></router-view>


</div>
<div id="bpp">
    <woman-com></woman-com>
    <dog-com></dog-com>
</div>
<template id="humanTem">
    <div>
        <h3>human 组件</h3>
        <router-link to="/human/man">男人</router-link>
        <router-link to="/human/woman">女人</router-link>
        <router-view></router-view>
    </div>
</template>


<!-- 对应template的属性值 -->
<template id="manTem">
    <div>
        <h3>男human 组件</h3>
    </div>
</template>

<template id="womanTem">
    <div>
        <h3>女human 组件</h3>
    </div>
</template>

<template id="dogTem">
    <div>
        <h3>狗子 组件</h3>
    </div>
</template>


<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    let humanCom = {
        template: `#humanTem`
    }
    let manCom = {
        template: `#manTem`
    }
    let womanCom = {
        template: `#womanTem`
    }
    let dogCom = {
        template: `#dogTem`
    }

    // 对应组件的名称
    let router = new VueRouter({
        routes: [{
            path: `/`,
            redirect: `/human`
        },
            {
                path: `/human`,
                component: humanCom,
                children: [{
                    path: `/human/man`,
                    component: manCom
                },
                    {
                        path: `/human/woman`,
                        component: womanCom
                    }
                ]
            },
            {
                path: `/dog`,
                component: dogCom
            }
        ]

    })


    const APP = new Vue({
        el: `#app`,
        router,
        components: {
            humanCom,
            manCom
        }
    })
    const BPP = new Vue({
        el: `#bpp`,
        components: {
            womanCom
        }
    })
</script>

</body>
</html>
